<template>
<!-- fys 7.4 -->
	<div class="ScenicspotDetails">
        <div id="scenicfetails-head">
            <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="/"><i class="el-icon-s-home"></i></el-menu-item>
                <el-menu-item index="1">目的地攻略</el-menu-item>
                <el-menu-item index="2">游记</el-menu-item>
                <el-menu-item index="/Chat">问答</el-menu-item>
                <el-menu-item index="4">当地向导</el-menu-item>
                <el-menu-item index="/MyHomePage">我的主页</el-menu-item>
            </el-menu>
        </div>
        <!-- 景点详情页面--导航栏 -->
        <div id="scenicDetails-navigation">
            <!-- 景点详情页面--所在地区 -->
            <div class="ant-breadcrumb" style="margin-top:20px;">
                <span>
                    <span class="ant-breadcrumb-link" id="gesture" @click="goHome" style="color:blue">
                        旅游攻略社区
                    </span>
                        <span class="ant-breadcrumb-separator">&gt;</span>
                    </span>
                <span>
                    <span class="ant-breadcrumb-overlay-link ant-dropdown-trigger">
                        <span class="ant-breadcrumb-link">
                            <el-dropdown>
                                <span>
                                    <font size="3px">{{destination}}</font><i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>目的地</el-dropdown-item>
                                    <el-dropdown-item>目的地</el-dropdown-item>
                                    <el-dropdown-item>目的地</el-dropdown-item>
                                    <el-dropdown-item>目的地</el-dropdown-item>
                                    <el-dropdown-item>目的地</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </span>
                    </span>
                    <span class="ant-breadcrumb-separator">&gt;</span>
                </span>
                <span  v-for="(o,index) in scenicDetailsList" :key="index">
                    <span class="districtName">{{o.scenicName}}</span><span class="ant-breadcrumb-separator">&gt;</span>
                </span>
            </div>
            <!-- 景点详情页面--详情内容展示 -->
            <div id="scenicDetails-Exhibition-one">
                <div class="demo-image__preview" style="margin-top:20px;margin-left:20px;float: left;">
                    <el-image class="datu"
                        :src="src"
                        style="width:530px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);height:415px"
                        :preview-src-list="srcList"
                        @click="clickevaluatePicture">
                    </el-image>
                </div>
                <div id="scenicDetails-Exhibition-two">
                    <ul  v-for="(item,index) in aa.slice(0,4)" :key="index">
                        <li id="gesture">
                            <img :src='`http://127.0.0.1:8082/getImageById?id=${item}`'  style="width:128px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);height:100px" @click="qwe(item)">
                        </li>
                    </ul>
                </div>
                <div id="scenicDetails-Exhibition-s">
                    <ul style="background-color: white;" v-for="(o,index) in scenicDetailsList" :key="index">
                        <li><h1>{{o.scenicName}}</h1></li>
                        <li style="margin-top:30px">
                            <font size="4px" style="font-weight: bold;">地址</font>
                            <span style="margin-left:30px">
                                <font size="3px">{{o.scenicAddress}}</font>
                            </span>
                        </li>
                        <li style="margin-top:30px">
                            <font size="4px" style="font-weight: bold;">开放时间</font>
                            <span style="margin-left:10px;"> 
                                <font size="3px" @click="jump" id="gesture">{{o.openingTime}}</font>
                            </span>
                        </li>
                        <li style="margin-top:30px">
                            <font size="4px" style="font-weight: bold;">官方电话</font>
                            <span style="margin-left:15px">
                                <font size="3px">{{o.officialPhone}}</font>
                            </span>
                        </li>
                        <li style="margin-top:30px">
                            <font size="4px" style="font-weight: bold;">公告信息</font>
                            <span style="margin-left:15px">
                                <font size="3px" @click="openNotice" id="gesture">入园防疫通知</font>
                            </span>
                        </li>
                        <el-dialog title="疫情通知" :visible.sync="Notice" style="width:800px;height:800px;margin-left:30%;margin-top:10%">
                            <font size="3px">{{o.announcementInformation}}</font>
                        </el-dialog>
                        <li style="margin-top:30px">
                            <font size="4px" style="font-weight: bold;">剩余票数</font>
                            <span style="margin-left:15px;color:red;">
                                <font size="3px" v-text="selectSurplusTickets+'票'"></font>
                            </span>
                        </li>
                        <li style="margin-top:30px">
                            <font size="4px" style="font-weight: bold;">是否收藏景区</font>
                                <i  :style="abc" :class="iconColor"  id="iconColor" @click="onColorChange(o.scenicName)"></i>
                        </li>
                        <el-button :disabled="selectSurplusTickets == 0" style="width:450px;height:50px;margin-left:20px;margin-top:10px;" type="warning" @click="buyTicket()">立即购票</el-button>
                    </ul>
                </div>
            </div>
            <!-- 景点详情页面--小程序及APP     链接二维码 -->
            <div id="scenicDetails-code">
                <h2>门票请扫码前往【微信小程序】或【APP】购买</h2>
                <div style="height:200px;width:160px;float:left;margin-left:400px;">
                    <img src="../../img/易游小程序码.png" width="160px">
                    <p style=" text-align: center;">APP小程序</p>
                </div>
                <div style="height:200px;width:160px;float:left;margin-left:50px;">
                    <img src="../../img/易游二维码.png" width="160px">
                    <p style=" text-align: center;">下载APP</p>
                </div>
            </div>
            <!-- <div id="he-plugin-simple" style="margin-top:400px"></div> -->
            <template id="hxp-weather">
                <!--生成实时天气信息卡片组件 -->
                <div class="hxp-weather" >
                    <div class="hxp-weather-footer" @mouseover="mouseOver"  @mouseleave="mouseLeave">
                        <div class="text-center hxp-weather-footer-left">
                            <img :src='`http://127.0.0.1:8082/getImageById?id= ${this.infoPictureId} `' style="width:120px;height:120px;margin-left:80px">
                            <h2 style="margin-left:380px;margin-top:-110px">{{weatherList.temperature}}℃</h2>
                            <em style="margin-left:380px;margin-top:-110px">{{weatherCityName}}</em>
                            <!-- <h2 style="margin-left:380px;margin-top:-110px">北京</h2>
                            <h2 style="margin-left:380px;margin-top:20px">32℃</h2>  -->
                        </div>
                        <div class="hxp-weather-footer-right">
                            <ol>
                                <li style="margin-top:14px;list-style-type:none;text-align: center;">天气：{{weatherList.info}}</li>
                                <li style="margin-top:14px;list-style-type:none;text-align: center;">气温：{{weatherList.temperature}}℃</li>
                                <li style="margin-top:14px;list-style-type:none;text-align: center;">空气质量：{{weatherList.aqi}}</li>
                                <!-- <li style="margin-top:14px;list-style-type:none;text-align: center;">天气：晴</li>
                                <li style="margin-top:14px;list-style-type:none;text-align: center;">气温：32℃</li>
                                <li style="margin-top:14px;list-style-type:none;text-align: center;">空气质量：32</li> -->
                            </ol>
                        </div>
                    </div>
                </div>
            </template>
            <!-- 近五天天气预报 -->
            <div style="height:300px;width:960px;margin-left:100px" v-if="recent">
                <el-row>
                    <el-col :span="8" v-for="(o, index) in recentWeatherList.slice(1,5)" :key="index" style="height:100%;width:190px;margin-left:50px;margin-top:10px" >
                        <el-card :body-style="{ padding: '0px' }" >
                            <div v-for="item in weatherForecastList" :key="item.weatherType"> 
                                 <img v-if=" item.weatherType == o.weather" :src='`http://127.0.0.1:8082/getImageById?id=${item.pictureId}`' style="float:left;height:100px;margin-left:40px;width:100px">
                            </div>
                             <!-- <img  :src='`http://127.0.0.1:8082/getImageById?id=823`' style="float:left;height:100px;margin-left:20px"> -->
                            <!-- <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image"> -->
                            <div style="padding: 14px;float:left;">
                                <div class="bottom clearfix" style="">
                                    <!-- <div style="text-align: center;width:160px">
                                        <h3>2019-9-9</h3>
                                    </div>
                                    <div style="margin-top:10px;text-align: center;">
                                        <span>晴天</span>
                                    </div>
                                    <div style="text-align: center;margin-top:10px">
                                        <span>32℃</span>
                                    </div>
                                    <div style="text-align: center;margin-top:10px  ">
                                        <span>北风转西南风</span>
                                    </div> -->
                                    <div style="text-align: center;width:160px">
                                        <h3>{{o.date}}</h3>
                                    </div>
                                    <div style="margin-top:10px;text-align: center;">
                                        <span>{{o.weather}}</span>
                                    </div>
                                    <div style="text-align: center;margin-top:10px">
                                        <span>{{o.temperature}}</span>
                                    </div>
                                    <div style="text-align: center;margin-top:10px  ">
                                        <span>{{o.direct}}</span>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
            
            <div id="scenicDetails-Exhibition-three" style="width:1200px;">
                <ul style="background-color: white;width:850px" v-for="(o,index) in scenicDetailsList" :key="index">
                    <li style="margin-top:50px">
                        <font size="5px" style="font-weight: bold;margin-left:30px">详细信息</font>
                        <p style="margin-left:50px;margin-top:20px;width:1150px">
                            <font size="3px">{{o.introduce}}</font>
                        </p>
                    </li>
                    <li style="margin-top:50px">
                        <font size="4px" style="font-weight: bold;margin-left:30px" id="map">开放时间</font>
                        <p style="margin-left:50px;margin-top:20px;width:1150px">
                            <font size="3px">{{o.openingTime}}</font>
                        </p>
                    </li>
                        <li style="margin-top:50px">
                        <font size="4px" style="font-weight: bold;margin-left:30px">优待政策</font>
                        <p style="margin-left:50px;margin-top:20px;width:1150px">
                            <font size="3px">{{o.preferentialTreatment}}</font>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
<script>
import loginbc from '@/assets/ChMkLGJ4c1aIDrEAAFSdL28IjOYAADMnwAAAAAAVJ1H047.jpg'
const axios = require('axios')
export default {
  created(){
    //和风天气插件调用
    window.WIDGET = {
      "CONFIG": {
        "modules": "01234", // 模块
        "background": "1", // 背景
        "tmpColor": "FFFFFF", //温度字体颜色2
        "tmpSize": "26", // 温度字体大小
        "cityColor": "FFFFFF", //城市字体颜色
        "citySize": "26", // 城市字体大小
        "aqiColor": "FFFFFF", 
        "aqiSize": "26",
        "weatherIconSize": "24",
        "alertIconSize": "18",
        "padding": "100px 100px 100px 100px",
        "shadow": "0",
        "language": "auto",
        "fixed": "false",
        "vertical": "top",
        "horizontal": "left",
        "key": "373e001db2cf45a48e4eba7bd89340d9"
      }
    };
    (function (d) {
      var c = d.createElement('link');
      c.rel = 'stylesheet';
      c.href = 'https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0';
      var s = d.createElement('script');
      s.src = 'https://widget.heweather.net/simple/static/js/he-simple.js?v=1.4.0';
      var sn = d.getElementsByTagName('script')[0];
      sn.parentNode.insertBefore(c, sn);
      sn.parentNode.insertBefore(s, sn);
    })(document);
  },
  data () {
    return {
      //
      abc:{
        fontSize:'20px',
        marginLeft:'30px',
        color:'#dbdbdb',
        
      },
      
      iconColor: "el-icon-star-on",
      selectSurplusTickets: 0, //景区剩余门票数
      selectScenicList: [],//根据景区id查询剩余门票数集合
      id: '', // 景区id
      scenicDetailsList: '', // 景区详情集合
      Notice: false, //疫情通知弹窗 
      imageAll: false, // 查看所有图片
      aa: [], // 存放图片id
      drawer: false, // 查看所有图片弹窗
      scenicDetailsFirstList: '',
      bb: [], // 存放第一张图片id
      srcList: [],
      imageIds: '',
      activeIndex: '1',
      activeIndex2: '1',
      input: '',
      community: '旅游攻略社区',
      destination: '目的地',
      districtName: '上海迪士尼度假区',
      src: '',
      xinxi: [
        {
          name: '上海迪士尼乐园',
          pingfen: '4.7',
          pinglun: '2134568',
          dizhi: '上海市浦东新区川沙新镇黄赵路310号',
          ktime: '10:00',
          iphone: '4001800000'
        }
      ],
      imglist: [
        {
          id: 1,
          name: '上海海洋公园',
          images: 'https://youimg1.c-ctrip.com/target/01025120009m89er38454_D_521_391.jpg'
        },
        {
          id: 2,
          name: '上海海洋公园',
          images: 'https://youimg1.c-ctrip.com/target/0100q120008ji2zrl9DEF_D_521_391.jpg'
        },
        {
          id: 3,
          name: '上海海洋公园',
          images: 'https://youimg1.c-ctrip.com/target/100h0p000000fhsv75457_D_521_391.jpg'
        },
        {
          id: 4,
          name: '上海海洋公园',
          images: 'https://youimg1.c-ctrip.com/target/100h050000000m88w1495_D_521_391.jpg'
        }
      ],
      Addcollection:{
        //收藏id
        id:'',
        //获取当前登录的用户id
        userId:'',
        //收藏景区名称
        sciencName:'',
        //收藏景区id
        sciencId:'',
        //用户id
        userId:'',
        //收藏景区图片id
        sciencAvatarId:''
      },
      //收藏景区集合
      CollectionScenic:[],
      //收藏id
      collectionId:'',
      //获取景区门票价钱
      scenicPrice:'',
      // 城市信息集合
      cityList:'',
      //景区城市id
      cityId:'',
      //景区城市名称
      cityName:'',
      // 存放接口返回的城市天气信息集合
      weatherList:[],
      // 天气背景图片
      loginbc: loginbc, 
      // 存放接口返回的近期天气集合
      recentWeatherList:[],
      // 天气中的城市名称
      weatherCityName:'',
      // 控制近五天天气预报的显示
      recent: false,
      //存放本天的天气图片
      infoPictureId:'', 
      // 存放本天的天气信息
      weatherTodayList:[],
      // 存放天气状态信息
      weatherForecastList:[],
    }
  },
  mounted () {
    this.userId = window.sessionStorage.getItem("id")
    // 查询景区所有信息
    this.getScenicDetailsAll() 
    this.getScenicImageFirst()
    this.$router.afterEach((to,form,next)=>{
        window.scrollTo(0,0)
    })
    this.getSurplusTicket()//查询剩余门票数
    //查询是否收藏景区
    this.getCollectionScenic()
    // 获取天气状态数据
    this.getAllWeather()
  },
  methods: {
    // 获取天气状态数据
    getAllWeather () {
        axios
            .get('http://127.0.0.1:8082/weatherForecast/getAllWeather')
            .then((res) => {
                this.weatherForecastList = res.data.obj
                debugger
        })
    },
    // 根据天气类型查询天气
    getWeatherByInfo(){
        debugger
        axios.get('http://127.0.0.1:8082/weatherForecast/getWeatherByWeatherType?weatherType='+ this.weatherList.info).then(res=>{
            this.weatherTodayList = res.data.obj
            this.infoPictureId = this.weatherTodayList[0].pictureId
            debugger
        })
    },
    // 鼠标移出时让近五天天气预报关闭显示
    mouseLeave () {
        this.recent = false
    },
    // 鼠标移入时让近五天天气预报显示
    mouseOver () {
        this.recent = true
    }, 
    // 根据景区城市id查询城市名称
    getCityNameByCityId(){
        axios.get('http://127.0.0.1:8082/area/getCityNameByCityId?cityId='+ this.cityId).then(res=>{
            this.cityList = res.data.obj
            this.cityName = this.cityList[0].shortname
            this.getWeatherByCityName()
        })
    },
    // 根据景区名称查询天气信息
    getWeatherByCityName(){
        axios.get('http://127.0.0.1:8082/wrather/queryWeather?cityName='+ this.cityName).then(res=>{
            this.weatherList = res.data.result.realtime
            this.recentWeatherList = res.data.result.future
            this.weatherCityName = res.data.result.city
            //根据天气类型查询天气
            this.getWeatherByInfo()
            debugger
        })
    },
    //消息提示框
    message(message,type){
        this.$message({
            message:message,
            type: type
        });
    },
    //查询是否是否收藏景区
    getCollectionScenic(){
        this.id = this.$route.query.id
        if(window.sessionStorage.getItem("id")===null){
            this.abc={
                fontSize:'20px',
                marginLeft:'30px',
                color:'#dbdbdb',
            }
        }else{
            axios.get('http://127.0.0.1:8082/collection/getCollectionScenic',{
                params: {
                    id: this.id,
                    userId: this.userId
                }
            }).then(res=>{
            this.CollectionScenic = res.data.obj
            this.CollectionScenic.forEach((item)=>{
                this.collectionId = item.id
            })
            if(this.collectionId!==''){
                this.abc={
                    color:'#f4ea2a',
                    fontSize:'20px',
                    marginLeft:'30px',
                }
            }
            }).catch(error => {
                this.$message.error('查询收藏景区失败！');
            })
        }
        
    },
    //收藏景区
    onColorChange(scenicName) {
        if(this.abc.color==='#dbdbdb'){
            var formdata = new FormData();
            formdata.set("userId",window.sessionStorage.getItem('id'))
            formdata.set("scenicName",scenicName)
            formdata.set("scenicId",this.id)
            formdata.set("scenicAvatarId",this.aa[0])
            formdata.set("scenicPrice",this.scenicPrice)
            axios.post('http://127.0.0.1:8082/collection/collectionScenic',formdata).then(res=>{
                if(res.data.code==='200'){
                    this.message("恭喜你，收藏成功！","success")
                    this.abc= {
                        color:'#f4ea2a',
                        fontSize:'20px',
                        marginLeft:'30px',
                    } 
                }
            }).catch(error => {
                console.log(error)
                this.$message.error('收藏景区失败！');
            })
        }
        else{
            this.getCollectionScenic()
            this.$confirm('您要取消该景区收藏, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }//删除提示框
                    ).then(() => {
                        axios.delete('http://127.0.0.1:8082/collection/deleteCollectionScenic',{
                            params:{
                                id: this.collectionId,
                                scenicId: this.id
                            }
                        })
                    .then(res =>{
                        if(res.data.code==='200' ){
                            this.message("恭喜你，取消收藏成功！","success")
                                this.abc={
                                    fontSize:'20px',
                                    marginLeft:'30px',
                                    color:'#dbdbdb',
                                }
                        }else{
                            this.message('取消收藏失败','warning')
                        }
                    }).catch(error =>{
                        alert(error)
                    })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                    });          
                });
            
        }
      
    },
    // 购买门票
    buyTicket () {
        if (window.sessionStorage.getItem('token') !== null) {
            this.$router.push('/scenicTickets?scenicid=' + this.id)
        } else {
            this.$router.push({name: 'login'})
        }
    },
    //查询景区剩余门票
    getSurplusTicket(){
        axios.get('http://127.0.0.1:8082/ticket/getSurplusTicket?scenicId=' + this.id).then(res=>{
            this.selectScenicList = res.data.obj
            this.selectScenicList.forEach((item) => {
                this.selectSurplusTickets = item.surplusTickets
            })
        })
    },
    goHome(){
        this.$router.push('/')
    },
    // 点击图片展示大图
    clickevaluatePicture(){
        this.id = this.$route.query.id
        this.$axios.get('http://127.0.0.1:8082/scenic/scenicDetailsAllById?id=' + this.id).then((res) => {
        this.scenicDetailsList = res.data.obj
        this.scenicDetailsList.forEach((item) => {
             this.aa = item.imageId.split(',')
        })
        for(var i=0 ; i<this.aa.length ; i++){
            this.srcList.push('http://127.0.0.1:8082/getImageById?id=' + this.aa[i])
        }
     })
    },
      // 点击时跳转
    jump(){
		this.$nextTick(() => {
		      setTimeout(() => {
		          //获取指定的div盒
		          let targetbox = document.getElementById('map')
		          //获取这个div盒的高度位置
		          this.target = targetbox.offsetTop
		          console.log(this.target)
		          //将滚动条定位到这个高度位置
		          document.documentElement.scrollTop = this.target
		      })
		})
	},
    // 退出所有图片弹窗
    handleClose(done) {
        this.$confirm('确认退出观看嘛？').then(_ => {
            done();
        })
        .catch(_ => {});
    },
    // 疫情通知弹窗
    openNotice(){
        this.Notice  = true
    },
    //查询第一张图片
    getScenicImageFirst(){
        this.id = this.$route.query.id
        this.$axios
        .get('http://127.0.0.1:8082/scenic/getScenicImageFirstById?id=' + this.id).then((res) => {
            this.scenicDetailsFirstList = res.data.obj
            this.scenicDetailsFirstList.forEach((item) => {
            this.bb = item.imageId.split(',')
            })
            console.log(this.bb)
            this.src = 'http://127.0.0.1:8082/getImageById?id=' + this.bb
        })
    },
    // 查询景区所有信息
    getScenicDetailsAll(){
     this.id = this.$route.query.id
     this.$axios
     .get('http://127.0.0.1:8082/scenic/scenicDetailsAllById?id=' + this.id).then((res) => {
         this.scenicDetailsList = res.data.obj
         this.cityId = this.scenicDetailsList[0].cityId
        // 根据景区城市id查询城市名称
        this.getCityNameByCityId()
         console.log(this.scenicDetailsList)
         this.scenicDetailsList.forEach((item) => {
         this.aa = item.imageId.split(',')
         this.scenicPrice = item.price
         })
         console.log(this.aa)
     })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    // 点击图片是大图展示
    qwe (item) {
      this.imageIds = item
      this.src = 'http://127.0.0.1:8082/getImageById?id=' + this.imageIds
    }
  }
}
</script>
<style  scoped>
#iconColor:hover{
    cursor:pointer;
}
.el-menu-demo{
    width:1200px;
    margin:0 auto;
}
.ScenicspotDetails{
    width: 100%;
    height: 100%;
    background-color:#f6f6f6;
}
#gesture:hover{
    cursor: pointer;
}
.scenicDetails{
    background-color: aliceblue;
    height: 1000px;
}
#scenicfetails-head{
    width: 100%;
    height: 60px;
    background-color: white;
}
#scenicDetails-navigation{
    width: 1200px;
    margin: 0 auto
}
#scenicDetails-Exhibition-one{
    width: 1200px;
    height: 440px;
    margin-top: 20px;
    background-color: white;
}
#scenicDetails-Exhibition-two{
    width: 110px;
    height: 420px;
    margin-top: 20px;
    margin-left: 10px;
    float: left;
    background-color: white;
}
#scenicDetails-Exhibition-s{
    width: 450px;
    height: 420px;
    margin-top: 20px;
    margin-left: 30px;
    float: left;
    background-color: white;
}
#scenicDetails-Exhibition-three{
    width: 1200px;
    height: 520px;
    margin-top: 40px;
    float: left;
    background-color: white;
}
#scenicDetails-Exhibition-three *{
    background-color: white;
}
#scenicDetails-Exhibition-two *{
    background-color: white;
}
#scenicDetails-code{
    width: 1200px;
    height: 280px;
    margin-top: 20px;
    background-color: white;
}
#scenicDetails-code h2{
    text-align: center;
    line-height: 60px;
}
ul{
    list-style: none;
    padding: 0;
}
/* --------------天气卡片区------------ */
.hxp-weather {
    margin: 1rem auto;
    color: #394568;
    background: linear-gradient(to bottom, #d1d8eb 40%);
    border-radius: 5px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
    width: 80%;
    height: 120px;
    align-items: flex-end;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    font-family: "Open Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    margin-top:60px;
    background: rgb(255, 255, 255);
}

.hxp-weather-header {
    width: 100%;
    height: 50%;
    
}

.hxp-weather-footer {
    width: 100%;
    height: 50%;
}

.hxp-weather-footer-left,
.hxp-weather-footer-right {
    width: 50%;
    height: 5rem;
    float: left;
    
}
</style>
